<template>
  <el-dialog title="查看到达预报"
             :visible.sync="dialogForm"
             width="1200px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             class="add-form"
             label-width="110px">
      <h3>基础信息</h3>
      <hr />
      <el-row>
        <el-col :span="8"
                class="el-height"><span class="labels">货主:</span>{{form.cargoOwnerName}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">车船号:</span>{{form.transhipNo}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">运输方式:</span>{{form.transportWay | _filterTransportModeType}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">物资发放时间:</span>{{form.startOffDate}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">预计到达时间:</span>{{form.forecastArrivalDate}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">始发站:</span>{{form.startStationName}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">预计总件数:</span>{{form.forecastNum}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">预计总重量（吨）:</span>{{form.forecastWeight}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">备注:</span>{{form.remark}}</el-col>
      </el-row>
      <div>
        <el-row>
          <el-col :span="14">
            <div class="control-line">
              <h3>详细信息</h3>
            </div>
          </el-col>
        </el-row>
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item index="1">预报详情</el-menu-item>
          <el-menu-item index="2">确认记录</el-menu-item>
        </el-menu>
        <!-- 预报详情 -->
        <el-table :data="form.detailVoList"
                  v-show="showList"
                  border
                  stripe
                  max-height="550">
          <el-table-column label="序号"
                           type="index"
                           width="50"></el-table-column>
          <el-table-column prop="cargoName"
                           label="品名"
                           width="120"></el-table-column>
          <el-table-column prop="normStr"
                           label="规格"
                           width="120"></el-table-column>
          <el-table-column prop="material"
                           label="材质"
                           width="120"></el-table-column>
          <el-table-column prop="madeBy"
                           label="生产厂家"
                           width="120"></el-table-column>
          <el-table-column prop="baleNo"
                           label="捆包号"
                           width="120"></el-table-column>
          <el-table-column prop="num"
                           label="预计件数"
                           width="120"></el-table-column>
          <el-table-column prop="weight"
                           label="预计重量（吨）"
                           width="150"></el-table-column>
          <el-table-column prop="accountNum"
                           label="上账件数"
                           width="120"></el-table-column>
          <el-table-column prop="accountWeight"
                           label="上账重量"
                           width="150"></el-table-column>
        </el-table>
        <!-- 确认记录 -->
        <div v-show="showRecord" v-for="(item,index) in form.resureVoList">
          <el-row>
            <el-col :span="8"
                    class="el-height"><span class="labels">入库方式:</span>{{item.inWay | _filterBusinessType}}</el-col>
            <el-col :span="8"
                    class="el-height"><span class="labels">到达位置:</span>{{item.arrivePosition}}</el-col>
            <el-col :span="8"
                    class="el-height"><span class="labels" v-show="item.inWay==='SYDJ' || item.inWay==='ZXDJ'">目的位置:</span>{{item.tragetLocaltion}}</el-col>
          </el-row>
          <el-table :data="item.details"
                    v-show="showRecord"
                    border
                    stripe
                    max-height="550">
            <el-table-column label="序号"
                             type="index"
                             width="50"></el-table-column>
            <el-table-column prop="cargoName"
                             label="品名"
                             min-width="120"></el-table-column>
            <el-table-column prop="normStr"
                             label="规格"
                             min-width="120"></el-table-column>
            <el-table-column prop="material"
                             label="材质"
                             min-width="120"></el-table-column>
            <el-table-column prop="madeBy"
                             label="生产厂家"
                             min-width="120"></el-table-column>
            <el-table-column prop="num"
                             label="预计件数"
                             min-width="120"></el-table-column>
            <el-table-column prop="planNum"
                             label="交接件数"
                             min-width="120"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">返 回</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'viewArrivalForecastForm',
  data() {
    return {
      form: this.clearForm(),
      dialogForm: false,
      showList: true,
      showRecord: false,
      activeIndex: '1',
      data: []
    }
  },

  methods: {
    clearForm() {
      return {}
    },
    //详情切换
    handleSelect(key, keyPath) {
      if (key == 1) {
        this.showRecord = false
        this.showList = true
      } else {
        this.showList = false
        this.showRecord = true
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-height {
  margin: 10px 0;
}
h3 {
  margin: 10px 0;
}
.labels {
  margin-right: 5px;
}
</style>
